<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../static/js/vue.js"></script>
</head>

<body>
<h2>示例：动态组件</h2>
<div>
    <p>currentTabComponent 可以包括已注册组件的名字，或一个组件的选项对象</p>
    <p>keep-alive失活的组件将会被缓存.当在这些组件之间切换的时候，你有时会想保持这些组件的状态，以避免反复重渲染导致的性能问题</p>
    <p>当组件在keep-alive内被切换时组件的activated、deactivated这两个生命周期钩子函数会被执行</p>
</div>
<div id="components-demo">

    <keep-alive>
            <!-- 组件会在 `currentTabComponent` 改变时改变 -->
            <component v-bind:is="view"></component>
    </keep-alive>

    <div>
        <ul>
            <li class="per-tab" @click="toggleView('home')">Home</li>
            <li class="per-tab" @click="toggleView('posts')">About</li>
        </ul>
    </div>
</div>

<script>
    Vue.component('home', {
        template: '<p>home</p>'
    })

    Vue.component('posts', {
        template: '<p>posts</p>'
    })

    Vue.component('archive', {
        template: '<p>archive</p>'
    })

    new Vue({
        el: '#components-demo',
        data: {
            view: 'home'
        },
        methods: {
            toggleView(view) {
                this.view = view
            }
        }
    })

</script>
</body>
</html>
